<template>
	<view class="page">
		<view class="head">
			<view class="head-title">
				<view class="head-price-box">&yen<text class="head-price">{{money}}</text></view>
				<view class="head-selSucc">
					<image src="../../static/tick2.png"></image>
					<view>抢单成功，需要支付定金与保证金</view>
				</view>
				<view class="head-dj">请在指定时间内完成支付如未支付视为放弃抢单</view>
			</view>
			<view class="head-time">
				<image src="../../static/time.png"></image>
				<view>{{time}}</view>
			</view>
			<view class="head-bottom">
				<view>订单预计总额</view>
				<view>&yen548</view>
			</view>
		</view>

		<view>
			<view class="select-item">
				<view class="select-content">
					<image class="select-icon" src="../../static/user/yr.png"></image>
					<view class="select-name">
						<text>余额</text>
						<text>{{tableData.balance}}</text>
					</view>
					<!-- <view class="info_tick" @click="selectCar('')">
						<image v-show="pay_id == ''" src="../../static/tick1.png"></image>
					</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="show">

			<view class="select" v-for="(item,index) of bank">
				<view class="select-item">
					<view class="select-content">
						<image class="select-icon" v-if="item.bank_type == 3" src="../../static/bank.png"></image>
						<image class="select-icon" v-if="item.bank_type == 2" src="../../static/zfb1.png"></image>
						<image class="select-icon" v-if="item.bank_type == 1" src="../../static/wx1.png"></image>
						<view class="select-name">
							<text>{{item.name}}</text>
							<text v-if="item.bank_type == 1">微信</text>
							<text v-if="item.bank_type == 2">支付宝</text>
							<view class="item-delect">
								<text>{{item.thumb}}</text>					
							</view>
						</view>
						<view class="info_tick" @click="selectCar(item)">
							<image v-show="pay_id == item.id" src="../../static/tick1.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="submit" @click="formData">
			立即支付
		</view>
		<view class="yy" v-if="pswShow"></view>
		<view class="inpPsw" v-if="pswShow">
			<view class="close">
				<view>请输入密码</view>
				<view class="close-tick">您正在进行余额支付，请输入您的登录密码进行支付</view>
			</view>

			<input class="psw" focus="" v-model="password" type="password" placeholder="" />

			<view class="pswBtn">
				<view class="cancel" @click="closePsw">取消</view>
				<view class="sure" @click="sureDate">确定</view>
			</view>
		</view>
		<view class="null d-c-c p30" v-if="id == ''">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bank: {},
				pay_id: '0', //
				tableData: '', //余额
				time: '00:00',
				timer: null, //定时器
				isShow: false,
				id: '', //订单id
				listData: [],
				money: '',
				pswShow: false,
				password: '',
			}
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		onShow() {
			this.getData();
			this.getDataPrice();
			this.getOrderData();
			if (this.id != '') {
				this.downTime();
			}

		},
		onLoad(e) {
			if (e.select == 1) {
				this.id = e.order_id
			}
		},
		onBackPress(e) {
			uni.showModal({
				title: '温馨提示',
				content: '退出之后订单自动取消是否确认退出',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/home/grab/grab?select=2&&type=1&&id=' + this.id
						})
					} else if (res.cancel) {

					}
				}
			})
			return true;
		},
		methods: {
			closePsw() {
				this.pswShow = false;
			},
			sureDate() {
				let self = this;

				if (self.password == '') {
					uni.showToast({
						title: '请输入支付密码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				self.pswShow = false;
				if (self.tableData.balance < self.listData.front_money) {
					uni.showModal({
						title: '余额不足，请先充值',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/my-wallet/skype/skype'
								})
							} else if (res.cancel) {

							}
						}
					})
					return;
				}
				uni.showLoading({
					title: '正在支付'
				});
				self._post(
					'order.CarOrder/order_pay', {
						order_id: self.id,
						type: 1,
						password: self.password
					},
					function(data) {
						if (data.code == 1) {
							uni.showModal({
								title: '下单成功',
								success(res) {
									if (res.cancel || res.confirm) {
										uni.navigateTo({
											url: '/pagesUser/journey/journey'
										})
									}
								}
							})
						}
						//console.log(data);
						//self.tableData = res.data.list
						//this.loading = true;
						uni.hideLoading();
					}
				);
			},
			/* 获取订单信息 */
			getOrderData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get(
					'order.CarOrder/get_details', {
						id: self.id
					},
					function(data) {
						self.listData = data.data.info
						self.money = self.listData.front_money
						//console.log(Number(self.listData.front_money)+Number(self.listData.ensure_money))
						uni.hideLoading();
					}
				);
			},
			formData() {
				let self = this;
				//let bank_id = self.pay_id;//交易类型id
				self.pswShow = true;
				// if(self.tableData.balance < self.listData.front_money){
				// 	uni.showModal({
				// 		title:'余额不足，请先充值',
				// 		success(res) {
				// 			if(res.confirm){
				// 				uni.navigateTo({
				// 					url:'/pages/user/my-wallet/skype/skype'
				// 				})
				// 			}else if(res.cancel){

				// 			}
				// 		}
				// 	})
				// 	return;
				// }
				// uni.showLoading({
				// 	title: '正在支付'
				// });
				// self._get(
				// 	'order.CarOrder/order_pay', {
				// 		order_id:self.id,
				// 		type:2
				// 	},
				// 	function(data) {
				// 		//console.log(data);
				// 		//self.tableData = res.data.list
				// 		//this.loading = true;
				// 		/* 支付成功 */
				// 		uni.navigateTo({
				// 			url: '/pages/home/grab/grab?select=2&&type=2&&id='+self.id
				// 		})
				// 		uni.hideLoading();
				// 	}
				// );
			},
			/* 倒计时 */
			downTime() {
				let self = this;
				let minute = '15';
				let second = '00';
				self.time = minute + ":" + second;
				self.timer = setInterval(function() {
					second--;
					if (second < '10') {
						second = '0' + second;
					}

					if (second < '00') {
						minute--;
						if (minute < '10') {
							minute = '0' + minute;
						}
						second = '59';
					}
					if (minute < '00') {
						clearTimeout(self.timer);
						uni.navigateTo({
							url: '../../pages/home/home'
						});
					}
					self.time = minute + ":" + second;
				}, 1000)
			},

			/*获取数据*/
			getDataPrice() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get(
					'user.index/my_money', {

					},
					function(data) {
						//console.log(data);
						self.tableData = data.data.list
						//this.loading = true;
						uni.hideLoading();
					}
				);
			},
			/* 选择支付 */
			selectCar(item) {
				if (item == '') {
					this.pay_id = '';
				} else {
					this.pay_id = item.id;
				}

				//console.log(this.car_id);
			},
			/* 获取数据 */
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('user.index/bankCard', {}, function(res) {
					//console.log(res.data.bank);
					self.bank = res.data.bank;
					self.bank.forEach(item => {
						if (item.bank_type == 3) {
							var tel = item.bank_code;
							tel = "" + tel;
							var newTel = tel.substr(0, 4) + " **** **** **** " + tel.substr(15)
							item.thumb = newTel

						} else {
							var tel = item.bank_code;
							tel = "" + tel;
							var newTel = tel.substr(0, 3) + " **** " + tel.substr(7)
							item.thumb = newTel

						}
					})
					self.loadding = false;
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style>
	.head {
		width: 100%;
		height: 560rpx;
		border-top: 1rpx solid #EEEEEE;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.head-title {
		margin: 80rpx 80rpx 0rpx;
		text-align: center;
	}

	.head-selSucc {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #2554FE;
		font-size: 30rpx;
		margin: 10rpx 0;
	}

	.head-selSucc image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 6rpx;
	}

	.head-dj {
		width: 320rpx;
		font-size: 26rpx;
		color: #999999;
		margin: 0 auto;
	}

	.head-price-box {
		font-weight: 900;
		font-size: 30rpx;
		color: #2554FE;
	}

	.head-price {
		font-size: 46rpx;
	}

	.head-time {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;
		margin-bottom: 70rpx;
	}

	.head-time image {
		width: 56rpx;
		height: 56rpx;
		margin-right: 10rpx;
	}

	.head-time view {
		font-size: 56rpx;
	}

	.head-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		color: #999999;
		font-size: 30rpx;
		//margin-top: 100rpx;
	}

	.show {
		padding-top: 20rpx;
	}

	.select-item,
	.select-content {
		height: 120rpx;
		padding: 0 20rpx 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #F4F4F4;
		overflow: hidden;

	}

	.select-icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 30rpx;
	}

	.select-tick {
		width: 50rpx;
		height: 50rpx;
	}

	.select-name {
		display: flex;
		flex-direction: column;

	}

	.select-name text {
		margin: 0 0 6rpx;
	}

	.select-name text:first-child {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.select-name text:last-child {
		color: #a6a5a5;
	}

	.info_tick {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #a6a6a6;
		position: absolute;
		right: 60rpx;
		border-radius: 50%;
	}

	.info_tick image {
		width: 100%;
		height: 100%;
	}

	.submit {
		width: 90%;
		height: 80rpx;
		margin: 120rpx auto 20rpx;
		border-radius: 8rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 10rpx;
		background: linear-gradient(to right, #2554FE 10%, #5E7FFF 100%);
	}

	.null {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		background-color: #F4F4F4;
		z-index: 99;
	}

	.yy {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.6;
		z-index: 99;

	}

	.inpPsw {
		width: 68%;
		height: 400rpx;
		padding: 0 46rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 50%;
		left: 10%;
		margin-top: -250rpx;
		z-index: 999;
		border-radius: 20rpx;
	}

	.close {
		padding: 30rpx 20rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.close-tick {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #626262;
	}

	.psw {
		border-bottom: 1rpx solid #999999;
		margin: 0rpx auto 0;
		height: 60rpx;

	}

	.pswBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 60rpx;
	}

	.pswBtn view {
		width: 43%;
		border: 1rpx solid #2554FE;
		text-align: center;
		border-radius: 10rpx;
		height: 80rpx;

		line-height: 80rpx;
	}

	.cancel {
		color: #2554FE;
	}
</style>
